<template>
  <div class='detail bc-gray'>
    <div class="pr info-box bc-white">
      <p class="title"><span class="color-blue">{{detailData.classify}}</span><span>来自{{detailData.types}}{{detailData.from}}</span></p>
      <p class="content"><img class="fr" :src="detailData.collect?collected:nocollected" @click="setCollect(detailData)" >[主题] {{detailData.title}}</p>
      <p class="info">{{detailData.content}}</p>
      <p class="info">开始时间：{{detailData.start_time}}</p>
      <p class="info">结束时间：{{detailData.end_time}}</p>
      <span :class="{pa:true,'color-yellow':detailData.status==1,'color-green':detailData.status==0}">{{detailData.status === 1?"已结束":"进行中"}}</span>
    </div>

    <p v-if="detailData.form" class="receivers bc-white" @click="showForm(detailData)">表单<span v-show="detailData.is_sub_form" class="is-sub">已提交</span> <span class="fr">{{formaltForm}} <img :src="arrow" class="fr"></span></p>
    
    <p class="receivers bc-white" @click="$router.push('/message/rs/people/detail/'+detailData.id)">接收人：{{detailData.name}}等{{detailData.count}}人 <span class="fr">{{detailData.count-detailData.unreceive}}/{{detailData.count}}收到 <img :src="arrow" class="fr"></span></p>
  
    <van-dialog v-model="show" title="提交表单" show-cancel-button close-on-click-overlay @confirm="confirm">
      <van-field
        v-for="(item, index) in formKeys" :key="index"
        v-model="item.value"
        :label="item.label"/>
    </van-dialog>

  </div>
</template>
<script>
import MixIns from "@/mixin/mixin.js";
export default {
  components: {},
  name: "",
  data() {
    return {
      show:false,
      arrow:require("@/assets/images/message/arrow-right-black.png"),
      collected:require('@/assets/images/home/icon-collected-s.png'),
      nocollected:require('@/assets/images/home/icon-collected.png'),
      formKeys:[
        {
          label:"",
          key:"",
          value:""
        }
      ]

    };
  },
  computed:{
    formaltForm(){
      var val=this.detailData.form
      if(!val)return;
      var str=Object.keys(JSON.parse(val))[0]
      var labels=str.split("+")
      var keys=Object.values(JSON.parse(val))[0]
      var goals=[]
      labels.forEach((ele,index)=>{
        goals.push({
          label:ele,
          key:keys[index],
          value:""
        })
      })
      this.formKeys=goals
      return str
    },
  },
  methods: {
    setCollect(info){
      let url ="message/addCollect"
      _g.apiPost(url,{id:info.id}).then(res=>{
        _g.toMessage(res)
        if(!res.error)info.collect=!info.collect
      })
    },

    /**
     * @name 展示表单
     */
    showForm(info){
      if(info.is_sub_form){
        _g.toMessage({error:2,msg:"已经提交过了"})
        return
      }
      this.show=true
    },
    /**
     * @name 提交表单
     */
    confirm(){
      var params={
        pid:this.detailData.id,
        info:this.formKeys.map(val=>val.value).join()
      }
      _g.apiPost("message/formSubmit",params).then(res=>{
        _g.toMessage(res)
        if(!res.error){
          setTimeout(()=>{
            this.getDetail()
          },600)
        }
      })
    }
  },
  mixins: [MixIns]
};
</script>
<style lang="scss" scoped>
.info-box{
  padding: 20px;
  box-sizing: border-box;
  // border-bottom: 1px solid #ddd;
  .title{
    font-size: 16px;
    .color-blue{
      margin-right: 20px;
    }
  }
  .content{
    font-size: 17px;

    img{
      width: 60px;
      margin-right: 15px;
    }
  }
  .info{
    font-size: 12px;
    color: #666;
    margin-top: 8px;
  }
  span.pa{
    top: 0;
    right: 10px;
    padding: 5px 10px;
  }
  .color-yellow{
    color: #f5a623;
    background:rgba(245,166,35,0.2);
  }
  .color-green{
    color: #7ed321;
    background:rgba(126,211,33,0.2);
  }
}
.receivers{
  margin-top: 20px;
  padding:20px;
  font-size: 15px;
  color:#666;

  img{
    height: 40px;
    margin-top: 5px;
    margin-left: 20px;
  }
  .is-sub{
    margin-left: 10px;
    font-size: 12px;
    color: green
  }
}
</style>